<template>
	<!-- 首页签到 -->
	<view class="container flex-c">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">签到</text>
		</uni-nav-bar>
		<image class="bg-img" src="@/public/images/user/qdbg.png" mode="aspectFit"></image>
		<view class="body">
			<view class="signin flex-c ac" v-if="user && signRule">
				<view class="signin-title flex-c">
					<text class="title">{{user.growthvalue || 0}}</text>
					<text class="des">我的成长值</text>
				</view>
				<view class="signin-level flex-c">
					<view class="sign-body">
						<view class="signin-icon flex-r">
							<image src="@/public/images/user/rlgg.png" mode="aspectFit"></image>
							<image src="@/public/images/user/rlgg.png" mode="aspectFit"></image>
						</view>
						<view class="user-level" v-if="!signStatus && !user.signStatus">
							<text>今日签到可得成长值</text>
							<text class="color-blue" v-if="user.signTimes < 7 && signRule[user.signTimes]">{{signRule[user.signTimes].awardValue + signRule[user.signTimes].ruleValue}}</text>
						</view>
						<view class="user-level" v-else>
							<text>今日已签到，已连续签到</text>
							<text class="color-blue">{{user.signTimes}}</text>
							<text>天</text>
						</view>
						<view class="user-signin flex-r">
							<template v-for="(item, index) in signRule">
								<view class="span flex-c" :class="{'active': index < user.signTimes}" v-if="index != signRule.length-1" :key="item.id">
									<text class="day">第{{item.ruleTitle}}天</text>
									<image src="@/public/images/user/czb.png" mode="aspectFit"></image>
									<text class="des">{{item.awardValue+item.ruleValue}}成长值</text>
								</view>
								<view class="span flex-c last" :class="{'active': index < user.signTimes}" v-else :key="item.id">
									<view class="left flex-c">
										<text class="day">第{{item.ruleTitle}}天</text>
										<text class="des">{{item.awardValue+item.ruleValue}}成长值</text>
									</view>
								</view>
							</template>
						</view>
						<view class="signin-btn" :class="{active: !user.signStatus}">
							<button type="primary" @tap="signIn" v-if="!user.signStatus">立即签到</button>
							<button type="primary" v-else>已签到</button>
						</view>
					</view>
				</view>
				<image class="signin-foot" src="@/public/images/user/rly.png" mode="aspectFit"></image>
			</view>
			<view class="signin-desc flex-c">
				<text class="desc-title">温馨提示</text>
				<text class="desc-text">
					每日签到可得10成长值，连续签到7天可得100成长值，得到的成长值可提升会员等级，会员等级的提升有相应的会员福利等你来领取哦～
					会员升级规则：
					初始等级为LV1，奖励为新用户1折券；
					成长值达到1000时升级为LV2，奖励为3张满88减38的优惠券；
					成长值达到10000时升级为LV3，奖励为10张满88减58的优惠券；
					成长值达到50000时升级为LV4，奖励为赠送1888彩虹豆；
					成长值达到100000时升级为LV5，奖励为赠送3888彩虹豆；
					成长值达到500000时升级为LV6，奖励为赠送18888彩虹豆；
					成长值达到1000000时升级为LV7，奖励为赠送38888彩虹豆；
				</text>
			</view>
		</view>
		<view class="full-screen flex-r ac jc" v-if="haveSign">
			<view class="success flex-c ac">
				<view class="content flex-c ac">
					<image src="@/public/images/user/qdcgtc.png" mode="widthFix"></image>
					<view class="info flex-c ac">
						<text class="title">签到成功</text>
						<view class="color-grey">
							今日签到可得<text class="color-blue">{{awardValue}}</text>成长值
						</view>
						<button class="btn-default" @tap="closeToast">朕知道了</button>
					</view>
				</view>
				<view class="close flex-c ac" @tap="closeToast">
					<image src="@/public/images/user/qx_x.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				signRule: null,
				signRecord: null,
				awardValue: 10,
				haveSign: false,
				signStatus: false,
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		onLoad(){
			this.getUserRule()
			//this.getUserSignRecord()
			//this.getUserGrowthRecord()
		},
		methods: {
			//签到
			signIn() {
				if(this.user.signStatus) {
					uni.showToast({
						title: '今日已签到',
						icon: 'success'
					})
					return false
				}
				//签到提交
				this.$http.get({
					url: '/api/appUser/signDayByUserId',
					data: {
						userId: this.user.userId
					},
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						//更新状态
						this.haveSign = true
						this.signStatus = true
						//更新用户状态
						this.$store.dispatch('updateUserinfo')
						//设置奖励数据
						if(data.result.award){
							this.awardValue = data.result.award
						}else{
							let times = this.signTimes == 7 ? this.signTimes - 1 : this.signTimes
							if(this.signRule[times]){
								this.awardValue = this.signRule[times].awardValue + this.signRule[times].ruleValue
							}
						}
					}else{
						uni.showToast({
							title: data.message || '签到失败，请重试',
							icon: 'none'
						})
						//更新用户状态
						this.$store.dispatch('updateUserinfo')
					}
				}).catch((err) => {
					console.log(err)
					this.$store.dispatch('updateUserinfo')
					uni.showToast({
						title: '签到异常',
						icon: 'none'
					})
				})
			},
			//关闭签到成功提示
			closeToast() {
				this.haveSign = false
			},
			//获取签到规则
			getUserRule() {
				let signRule = sessionStorage.getItem('signrule')
				if(signRule){
					this.signRule = JSON.parse(signRule)
					return
				}
				this.$http.get({
					url: '/api/appUser/queryAppRuleRows',
					data: {
						type: 'sign',
						userId: this.user.userId
					},
				}).then(data => {
					console.log(data.result);
					if(data.success){
						this.signRule = data.result
						sessionStorage.setItem('signrule',JSON.stringify(data.result))
					}else{
						console.log(data.message)
						this.navBack(data.message)
					}
				}).catch((err) => {
					console.log(err)
					this.navBack('签到数据请求错误，请稍候重试')
				})
			},
			getUserSignRecord() {
				this.$http.get({
					url: '/api/appUser/queryUserSignRecordByUserId',
					data: {
						source: 'sign',
						userId: this.user.userId
					},
				}).then(data => {
					console.log(data.result);
					if(data.success && data.result.records && data.result.records[0]){
						this.signRecord = data.result.records
					}else{
						console.log(data.message)
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			getUserGrowthRecord() {
				this.$http.get({
					url: '/api/appUser/queryUserGrowthRecordByUserId',
					data: {
						userId: this.user.userId
					},
				}).then(data => {
					console.log(data.result);
					if(data.success){
						
					}else{
						console.log(data.message)
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			navBack(message){
				uni.showModal({
					title: '错误提示',
					content: message,
					showCancel: false,
					success: (res) => {
						if(res.confirm){
							this.$Router.back(1)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 0;
		min-height: var(--safe-height);
		background: linear-gradient(180deg, #3377FF 1%, #0055FF 100%);
		position: relative;
	}
	.bg-img{
		width: 100vw;
		height: 504rpx;
		max-width: $max-width;
		margin: $pc-margin;
		position: absolute;
		top: 96rpx;
		z-index: 1;
	}
	.body{
		z-index: 2;
		.signin{
			padding: 0 20rpx;
			.signin-title{
				align-items: center;
				margin: 90rpx 0;
				color: #FFFFFF;
				.title{
					font-size: 80rpx;
					font-family: Roboto;
					line-height: 0.9;
					font-weight: bold;
				}
				.des{
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}
			.signin-level{
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 0 40rpx;
				.sign-body{
					//transform: translateY(-40rpx);
					margin-top: -40rpx;
				}
				.signin-icon{
					padding: 0 78rpx;
					justify-content: space-between;
					image{
						width: 56rpx;
						height: 120rpx;
					}
				}
				.user-level{
					margin-top: 40rpx;
					font-size: 36rpx;
					font-weight: bold;
					line-height: 36rpx;
					text{margin-right: 10rpx;}
					.color-blue{
						color: #0055FF;
					}
				}
				.user-signin{
					margin: 30rpx 0 0;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
					.span{
						width: 142rpx;
						height: 180rpx;
						background: #F2F5FA;
						border-radius: 10rpx;
						font-size: 30rpx;
						font-weight: bold;
						align-items: center;
						justify-content: center;
						margin-bottom: 20rpx;
						image{
							width: 64rpx;
							height: 64rpx;
							margin: 14rpx 0;
						}
						.day{
							font-size: 24rpx;
							line-height: 24rpx;
							font-weight: 600;
						}
						.des{
							font-size: 20rpx;
							font-family: Arial;
							font-weight: 400;
							color: #999999;
							line-height: 20rpx;
						}
						&.active{
							color: #FFFFFF;
							background: #3377FF;
							.des{
								color: #FFFFFF
							}
						}
						&.last{
							width: 304rpx;
							align-items: flex-start;
							justify-content: center;
							background-image: url("~@/public/images/user/ydczb.png");
							background-size: 180rpx 180rpx;
							background-repeat: no-repeat;
							background-position: right;
							.left{
								height: 136rpx;
								margin-left: 40rpx;
							}
							.day{
								margin-bottom: 15rpx;
							}
						}
					}
					.span:nth-child(n+5){
						margin-bottom: 0;
					}
				}
				.signin-btn{
					margin: 60rpx 0;
					color: #FFFFFF;
					button{
						width: 630rpx;
						height: 96rpx;
						background: #CCCCCC;
						border-radius: 48rpx;
						font-size: 32rpx;
						font-weight: 500;
						line-height: 96rpx;
						padding: 0;
						margin: 0 auto;
					}
					&.active{
						button{
							background: #0055FF;
						}
					}
				}
			}
			.signin-foot{
				width: 650rpx;
				height: 40rpx;
			}
		}
		.signin-desc{
			//background-color: #0055FF;
			padding: 30rpx 20rpx calc(30rpx + var(--safe-area-inset-bottom));
			.desc-title{
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
			.desc-text{
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}
	}
	.full-screen{
		z-index: 997;
		touch-action: none;
		.success{
			//padding: 330rpx 135rpx 0;
			.content{
				background: #FFFFFF;
				border-radius: 20rpx;
				image{
					width: 480rpx;
				}
				.info{
					.title{
						line-height: 36rpx;
						font-size: 36rpx;
						font-weight: bold;
						margin: 40rpx 0 30rpx;
					}
					.color-grey{
						font-size: 28rpx;
						line-height: 28rpx;
					}
					.btn-default{
						margin: 40rpx 0 60rpx;
						width: 320rpx;
						height: 88rpx;
						background: #0055FF;
						border: none;
						border-radius: 44rpx;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 88rpx;
					}
				}
			}
			.close{
				image{
					width: 80rpx;
					height: 160rpx;
				}
			}
		}
	}
	.hide-slow{
		animation: hidetip 5s 1;
		animation-fill-mode: forwards;
		-webkit-animation: hidetext 5s 1;
		-webkit-animation-fill-mode: forwards;
	}
	@keyframes hidetext {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
	@-webkit-keyframes hidetext {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
</style>
